<template>
    <div class="app-wrapper openSidebar clearfix">
        <!-- sidebar -->
        <div class="sidebar-container">
            <div class="logo">
                <img alt="" src="./images/login/login-logo.png" style="width: 117px; height: 32px" />
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu :collapse-transition="false" :default-active="defAct" :unique-opened="false"
                    active-text-color="#f4f4f5" background-color="#343744" text-color="#bfcbd9">
                    <div :key="item.id" v-for="item in menuList">
                        <el-submenu :index="item.id" v-if="item.children && item.children.length > 0">
                            <template slot="title">
                                <i :class="item.icon" class="iconfont"></i>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item :index="sub.id" :key="sub.id" @click="menuHandles(sub, false)"
                                v-for="sub in item.children">
                                <i class="iconfont" :class="sub.icon"></i>
                                <span slot="title">{{ sub.name }}</span>
                            </el-menu-item>
                        </el-submenu>
                        <!-- -if="userInfo.id ==1" -->
                        <el-menu-item :index="item.id" @click="menuHandles(item, false)" v-else>
                            <i :class="item.icon" class="iconfont"></i>
                            <span slot="title">{{ item.name }}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="main-container">
            <!-- <navbar /> -->
            <div class="navbar">
                <div class="head-lable">
                    <span @click="goBack()" class="goBack" v-if="this.$store.state.home.goBackFlag"><img alt=""
                            src="./images/icons/btn_back@2x.png" /> 返回</span>
                    <span>{{ this.$store.state.home.headTitle }}</span>
                </div>
                <div class="right-menu">
                    <div class="avatar-wrapper">{{ userInfo.name }}</div>
                    <!-- <div class="logout" @click="logout">退出</div> -->
                    <img @click="logout" alt="退出" class="outLogin" src="./images/icons/btn_close@2x.png" />
                </div>
            </div>

            <div class="app-main" v-loading="loading">
                <!-- 遮罩层 -->
                <div class="divTmp" v-show="loading"></div>
                <router-view v-show="!loading" class="routerview" />
                <!-- <iframe id="cIframe" class="c_iframe" name="cIframe" :src="iframeUrl" width="100%" height="auto"
                    frameborder="0" v-show="!loading"></iframe> -->
            </div>
        </div>
    </div>
</template>

<script>
import { logoutApi } from '@/api/login'

export default {
    name: 'BackendIndex',
    data() {
        return {
            defAct: '2',
            userInfo: {},
            menuList: [
                // {
                //   id: '1',
                //   name: '门店管理',
                //   children: [
                {
                    id: '2',
                    name: '员工管理',
                    url: 'home/member',
                    icon: 'icon-member'
                },
                {
                    id: '3',
                    name: '分类管理',
                    url: 'home/category',
                    icon: 'icon-category'
                },
                {
                    id: '4',
                    name: '菜品管理',
                    url: 'home/food',
                    icon: 'icon-food',
                    // children: [
                    //     {
                    //         id: '4',
                    //         name: '菜品管理',
                    //         url: 'home/food',
                    //         icon: 'icon-food'
                    //     },
                    // ]
                },
                {
                    id: '5',
                    name: '套餐管理',
                    url: 'home/combo',
                    icon: 'icon-combo'
                },
                {
                    id: '6',
                    name: '订单明细',
                    url: 'home/order',
                    icon: 'icon-order'
                }
                //   ],
                // },
            ],
            loading: this.$store.state.home.loading,
        };
    },
    computed: {},
    created() {
        const userInfo = window.localStorage.getItem('userInfo')
        if (userInfo) {
            this.userInfo = JSON.parse(userInfo)
        }
        console.log("拿到用户信息");
        console.log(this.userInfo);
        // this.closeLoading()
        this.$store.dispatch('closeLoading');
    },
    beforeDestroy() {
        this.$store.dispatch('timerClearTimeout');
    },
    mounted() {
        console.log("====menuList");
        console.log(this.menuList);

        if (this.userInfo.id != 1) {
            this.menuList = [
                // {
                //   id: '1',
                //   name: '门店管理',
                //   children: [
                {
                    id: '3',
                    name: '分类管理',
                    url: 'home/category',
                    icon: 'icon-category'
                },
                {
                    id: '4',
                    name: '菜品管理',
                    url: 'home/food',
                    icon: 'icon-food'
                },
                {
                    id: '5',
                    name: '套餐管理',
                    url: 'home/combo',
                    icon: 'icon-combo'
                },
                {
                    id: '6',
                    name: '订单明细',
                    url: 'home/order',
                    icon: 'icon-order'
                }
                //   ],
                // },
            ]
            this.$router.push('/home/category')
            this.$store.dispatch("setHeadTitle", "分类管理");
        } else {
            this.$store.dispatch("setHeadTitle", "员工管理");
        }

    },
    methods: {
        //用户退出
        async logout() {
            await logoutApi().then((res) => {
                console.log(res);
                if (res.code === 1) {
                    localStorage.removeItem('userInfo')
                    this.$router.push('/login')
                }
            })
        },
        goBack() {
            const menu = this.menuList.find(item => item.id === this.$store.state.home.menuActived)
            menu.goBackFlag = false
            this.$store.dispatch('menuHandle', menu)
        },
        menuHandles(item, flag) {
            console.log("=====menuHandles");
            console.log(item);
            if (item.goBackFlag) {
                this.goBack()
            } else {
                this.$store.dispatch('menuHandle', item)
            }
        },
    }
};
</script>

<style lang="css" scoped>
/* 引入外部样式 */
@import '@/assets/icon/iconfont.css';
@import '@/assets/css/common.css';
@import '@/assets/css/index.css';

.app-main {
    height: calc(100% - 64px);
}

.app-main .divTmp {
    width: 100%;
    height: 100%;
}

.routerview {
    height: 100%;
    /* scroll */
    overflow-y: auto !important;
}
</style>